<template>
    <div>
        <template>

            <!--正文-->
            <div class="postPart">
                <!--头像及昵称-->
                <div class="hot-post-item-head" v-on:click="toUserHome(authorId)">
                    <!--头像-->
                    <van-image
                            round
                            width="2.5rem"
                            height="2.5rem"
                            :src="AuheaderHeader"


                    />
                    <div class="content">
                        <p class="post-author">{{authorName}}</p>
                        <p class="Commentator-time">{{time}}</p>
                    </div>
                </div>
                <!--内容-->
                <div class="hot-post-text" v-on:click="toPostDetails()">
                    <div>
                        <p class="post-title">{{title}}</p>
                    </div>
                    <div>
                        <p class="hot-post-text-text">{{text}}</p>
                    </div>
                    <div>
                        <img :src="picture" class="comment-item-picture">
                    </div>
                </div>

                <!--点赞和评论图标-->
                <div>
                    <van-row justify="center">

                        <van-col span="12">
                            <div class="post-dianzan">
                                <van-checkbox v-model="Isdianzan" v-on:click="Ondianzan()">
                                    <div>{{this.dianzanNumber}}</div>
                                    <template #icon="props">
                                        <img class="img-icon" :src="props.checked ? inactiveIcon : activeIcon"/>
                                    </template>
                                </van-checkbox>

                            </div>
                        </van-col>

                        <!--评论图标-->
                        <van-col span="12" v-on:click="toPostDetails()">
                            <div class="post-pinglun">
                                <img class="img-icon" src="@/views/post/static/post_pinglun.png"/>
                            </div>
                        </van-col>

                    </van-row>
                </div>

            </div>
            <!--评论列表-->
            <div>
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                    <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                    >
                        <template>
                            <div>

                                <div v-for="comment in commentList" :key="comment" class="comment-item">
                                    <!--评论上面一部分-->
                                    <div class="comment-item-top">
                                        <div>
                                            <!--头像-->
                                            <img :src="comment.commenterHeaderUrl" class="CommenterHeader">
                                        </div>
                                        <div>
                                            <div class="content">
                                                <p class="Commentator-name">{{comment.userName}}</p>
                                                <p class="Commentator-time">{{comment.time}}</p>
                                            </div>
                                        </div>

                                    </div>

                                    <!--评论下面一部分-->
                                    <div>
                                        <p class="Commentator-text">{{comment.text}}</p>
                                    </div>

                                </div>


                            </div>
                        </template>
                    </van-list>
                </van-pull-refresh>
            </div>

            <!--评论表单-->
            <div>
                <template>
                    <div>
                        <van-form @submit="onSubmit">
                            <div class="submitComment">
                                <div style="width: 325px">
                                    <van-field
                                            v-model="Usercomment"
                                            name="用户评论"
                                            placeholder="随便说点什么吧"
                                            :rules="[{required:true }]"
                                    />
                                </div>
                                <div>
                                    <van-button round block type="info" color="#515151" native-type="submit">提交
                                    </van-button>
                                </div>
                            </div>
                        </van-form>
                    </div>
                </template>

            </div>

        </template>
    </div>
</template>
<script>
    import postComment from '../post/post-comment';
    import {List, Toast} from 'vant';


    import {PullRefresh} from 'vant';


    import {Checkbox, CheckboxGroup} from 'vant';
    import {Col, Row} from 'vant';


    import {ref} from 'vue';


    import Vue from 'vue';
    import {ApiService} from "../../axios/apiService";

    Vue.use(Col);
    Vue.use(Row);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    Vue.use(List);
    Vue.use(postComment);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    Vue.use(PullRefresh)

    const postMessage = new ApiService("/PostDetails")//活动帖子数据
    const getCommentMessage = new ApiService("/PostDetails/Comment")

    const putComment = new ApiService("/post/putComment")
    export default {
        components: {},
        data() {

            return {
                Usercomment: "",
                authorId: "12",
                time: "",
                activeIcon: require("@/views/post/static/post_dianzan_activeIcon.png"),
                inactiveIcon: require("@/views/post/static/post_dianzan_inactiveIcon.png"),
                Isdianzan: false,
                loading: false,
                finished: false,
                refreshing: false,
                commentList: [],
            }
        },
        setup() {
            const checked = ref(false);
            return {
                checked,
            };
        },
        mounted() {
            this.getComment()
            this.getPostDetail()
            this.getBannnerImage()
            this.getIteams()
            console.log('初始化数据')
        },
        methods: {
            //评论
            onSubmit() {
                //在这里和后端交互
             if(putComment.getCookie("userid")){
                 putComment.getParams({
                     userId:putComment.getCookie("userid"),
                     putCommentMessage:this.Usercomment,
                     postId:this.$route.params.postId,
                 }).then(res=>{
                     console.log(res.data);//随便打印一一下后端传过来的数据
                 })
                 console.log(this.Usercomment);
                 //刷新
                 location.reload();
             }else {
                 Toast("您还没有登录")
             }


            },
            Ondianzan() {
                if (this.Isdianzan == false) {
                    console.log("取消赞");
                    const dianzanCut = new ApiService("/post/dianzanCut")
                    console.log(this.dianzanNumber)
                    this.dianzanNumber--;
                    console.log(this.dianzanNumber)
                    dianzanCut.getParams({
                        postId:this.postId
                    }).then(
                        res=>{
                            console.log(res.data)
                        }
                    )
                    console.log(this.dianzanNumber)
                    //这里刷新会使得界面加载变慢，但是不刷新的话更改后的数据并不会重新加载，目前还没有更好的解决办法
                    location.reload();
                    console.log(this.dianzanNumber)
                } else {
                    console.log("点赞")
                    const dianzanAdd = new ApiService("/post/dianzanAdd")
                    console.log(this.postId);
                    this.dianzanNumber++;
                    dianzanAdd.getParams({
                        postId:this.postId
                    }).then(
                        res=>{
                            console.log(res.data)
                        }
                    )
                    location.reload();
                }

            },
            //获取帖子详情
            getPostDetail() {
                var postId = this.$route.params.postId;//获取帖子ID
                /*向后端请求数据*/
                postMessage.getViewById(postId).then(res => {
                    this.authorName = res.data.userName;
                    this.AuheaderHeader = res.data.userHeader;
                    this.title = res.data.title;
                    this.text = res.data.text;
                    this.Isdianzan = res.data.dianzan;
                    this.picture = res.data.pictureUrl;
                    this.time = res.data.time;
                    this.postId = res.data.id;
                    this.dianzanNumber = res.data.dianzanNumber;
                    this.authorId = res.data.authorId;
                    console.log(res);
                })

            },

            getComment() {//根据帖子id获取评论
                var postId = this.$route.params.postId;//获取帖子ID
                getCommentMessage. getViewById(postId).then(res => {
                    this.commentList = res.data;
                })
            },
            toUserHome(authorId) {
                this.$router.push({name: "userHome", params: {userId: authorId}})/*跳转*/
            },
            onLoad() {
                setTimeout(() => {
                    if (this.refreshing) {
                        this.list = [];
                        this.refreshing = false;
                    }

                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    this.loading = false;

                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 1000);
            },
            onRefresh() {
                // 清空列表数据
                this.finished = false;

                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
            },

        },
        moreCategory() {
            this.$router.push("category")
        },

        onClickRight() {
            Toast('按钮');
        },
    }

</script>
<style>
    .submitComment {
        display: flex;
        position: fixed;
        bottom: 50px;
    }

    .CommenterHeader {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 2.5rem;
    }

    .post-title {
        color: black;
        font-size: 15px;
        margin: auto;
        font-weight: 700;
        margin-top: 6px;
        margin-left: 10px;
    }

    post-pinglun {
        margin-left: 54px;

    }

    .post-dianzan {
        margin-left: 80px;

    }

    .postPart {
        background: white;
    }

    .img-icon {
        height: 20px;
    }

    .Commentator-name {
        margin-left: 3px;
        margin-top: auto;
        color: black;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: auto;
    }

    .comment-item-top {
        margin-bottom: 3px;
        display: block;
        table-layout: auto;
        background: white;
        display: flex;

    }

    .Commentator-time {
        margin-left: 3px;
        margin-top: auto;
        color: gray;
        font-weight: 500;
        margin-bottom: auto;
    }

    .Commentator-text {
        margin: auto;
        margin-left: 34px;
        margin-right: 24px;
        margin-top: -4px;
    }

    .comment-item {
        background: white;
        margin-bottom: 7px;
    }

    .comment-item-picture {
        width: 117px;
        height: auto;
        margin-left: 24px;
        margin-top: 15px;
        margin-bottom: 10px;
    }
</style>